<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/9/2
  Time: 下午8:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="js/jquery-1.6.2.min.js"></script>
    <script src="layui.js"></script>
</head>
<body>
<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">付款人姓名</label>
        <div class="layui-input-inline">
            <select name="city" lay-verify="" class="city" lay-filter="city">
                <option value="">请选择</option>
            </select>
        </div>

        <label class="layui-form-label">收款人姓名</label>
        <div class="layui-input-inline">
            <select name="city1" lay-verify="" class="city1" lay-filter="city1">
                <option value="">请选择</option>
            </select>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">转账日期</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<table id="demo" lay-filter="test"></table>
<script>
    var selectList = [];
    //Demox
    layui.use(['form','table', 'laydate'], function () {
        var form = layui.form;
        var names = [];
        var table = layui.table;

        var laydate = layui.laydate;
        // console.log(111)
        //执行一个laydate实例
        laydate.render({
            elem: '#date1' //指定元素
        });

        //第一个实例
        var tables = table.render({
            elem: '#demo'
            , height: 500
            , url: 'jiluServlet' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '编号', sort: true, fixed: 'left'}
                , {field: 'funame', title: '付款人姓名'}
                , {field: 'shouname', title: '收款人姓名', sort: true}
                , {field: 'shoukahao', title: '收款人银行卡号'}
                , {
                    field: 'time', title: '转账时间', templet: function (d) {
                        //得到当前行数据，并拼接成自定义模板x
                        return d.time
                    }
                }
                , {field: 'money', title: '转账金额', sort: true}
            ]]
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            tables.reload({
                where: data.field
            })
            return false;
        });

        // form.on('select(city)', function (data) {
        //     console.log(data.elem); //得到select原始DOM对象
        //     console.log(data.value); //得到被选中的值
        //     console.log(data.othis); //得到美化后的DOM对象
        //
        //     $('.city1').empty();
        //
        //     $(selectList).each(function (index, v) {
        //         if (v.name!== data.value){
        //             let option = '<option>' + v.name + '</option>';
        //             $('.city1').append(option);
        //         }
        //     })
        //     form.render('select'); //刷新select选择框渲染
        // });
        //
        // form.on('select(city1)', function (data) {
        //     $('.city').empty();
        //     $(selectList).each(function (index, v) {
        //         if (v.name !== data.value) {
        //             let option = '<option>' + v.name + '</option>';
        //             $('.city').append(option);
        //         }
        //     })
        //     form.render('select'); //刷新select选择框渲染
        // });

        $.getJSON("selectservlet", show);

        function show(data) {
            selectList = data;
            names = data

            $(data).each(function (index, v) {
                let option = '<option>' + v.name + '</option>';
                console.log(option);
                $('.city').append(option);
                $('.city1').append(option);
            })
            form.render('select'); //刷新select选择框渲染
        }
    });
</script>
</body>
</html>
